<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
<body>
  <div id="app">
    <!-- 相当于实例一个组件 common-head 相当于 new app.component产生的组件class -->
    <common-head></common-head>
    <common-head></common-head>
    
  </div>
  
  <script src="./vue.global.js"></script>
  <script>
    const { createApp } = Vue;
    const app = createApp();
    // 注册全局组件 类
    // 相当于创建 全局组件 类
    /*
      参数1 组件名  vue2 大驼峰 CommonHead 或 common-head vue3 建议命名 是 CommonHead 大驼峰 建议组件名是两个或以上单词组成
      参数2  实例化组件时 传入的config （相当于 createApp的config）

      1 app.component相当于创建 一个 组件 的类
      2 使用组件 <组件名></组件名> 相当于实例化组件 new 上面产生的组件类
      3 组件类 实例化组件时 传入的config
      4 data为什么必须是 函数 返回对象
      5 每一个组件 都有一个封闭作用域，数据方法等 不能在外部使用
    */
    app.component('CommonHead', {
      // 视图模板属性
      template: `
        <div>
          <h1>这是头部组件</h1>  
          {{ msg }}
          <button @click="changeMsg">改变msg</button>
        </div>
      `,
      data(){
        return {
          msg: '这是头部组件的数据'
        }
      },
      methods: {
        changeMsg() {
          this.msg = '值改变了'
        }
      },
    })
    app.mount('#app')
  </script>
</body>
</html>